<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>旋转木马</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.container{
			width: 1000px;
			height: 500px;
			background-color: #ccc;
			margin: 20px auto;
			transform-style:preserve-3d;
           	perspective: 1000px;
			perspective-origin: 50% 0%;
		}
		.box{
			width: 100px;
			height: 100px;
			margin: 200px auto 0;
			position: relative;
			transform-style: preserve-3d;
			animation: muma 10s linear infinite;

		}
		img{
			width: 100px;
			height: 100px;
		}
		.box>div{
			width: 100px;
			height: 100px;
			position: absolute;
			margin: auto auto;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			font-size: 30px;
			line-height: 100px;
			text-align: center;

		}
		.box1{
			transform: rotateY(30deg) translateZ(500px);
		}
		.box2{
			transform: rotateY(60deg) translateZ(500px);
		}
		.box3{
			transform: rotateY(90deg) translateZ(500px);
		}
		.box4{
			transform: rotateY(120deg) translateZ(500px);
		}
		.box5{
			transform: rotateY(150deg) translateZ(500px);
		}
		.box6{
			transform: rotateY(180deg) translateZ(500px);
		}
		.box7{
			transform: rotateY(210deg) translateZ(500px);
		}
		.box8{
			transform: rotateY(240deg) translateZ(500px);
		}
		.box9{
			transform: rotateY(270deg) translateZ(500px);
		}
		.box10{
			transform: rotateY(300deg) translateZ(500px);
		}
		.box11{
			transform: rotateY(330deg) translateZ(500px);
		}
		.box12{
			transform: rotateY(360deg) translateZ(500px);
		}
		@keyframes muma{
			0%{
				transform: rotateX(-10deg) rotateY(0);
			}
			100%{
				transform: rotateX(-10deg) rotateY(360deg);
			}
		}
	</style>
</head>
<body>
	<!-- <div class="container"> -->
		<div class="box">
			<div class="box1"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536899431966&di=74df857685085634a5933599a3f857e1&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2018%2F04%2F2410310013230.jpg"></div>
			<div class="box2"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536899431966&di=74df857685085634a5933599a3f857e1&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2018%2F04%2F2410310013230.jpg"></div>
			<div class="box3"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536899431966&di=74df857685085634a5933599a3f857e1&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2018%2F04%2F2410310013230.jpg"></div>
			<div class="box4"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536899431966&di=74df857685085634a5933599a3f857e1&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2018%2F04%2F2410310013230.jpg"></div>
			<div class="box5"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536899431966&di=74df857685085634a5933599a3f857e1&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2018%2F04%2F2410310013230.jpg"></div>
			<div class="box6"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536899431966&di=74df857685085634a5933599a3f857e1&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2018%2F04%2F2410310013230.jpg"></div>
			<div class="box7"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536899431966&di=74df857685085634a5933599a3f857e1&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2018%2F04%2F2410310013230.jpg"></div>
			<div class="box8"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536899431966&di=74df857685085634a5933599a3f857e1&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2018%2F04%2F2410310013230.jpg"></div>
			<div class="box9"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536899431966&di=74df857685085634a5933599a3f857e1&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2018%2F04%2F2410310013230.jpg"></div>
			<div class="box10"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536899431966&di=74df857685085634a5933599a3f857e1&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2018%2F04%2F2410310013230.jpg"></div>
			<div class="box11"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536899431966&di=74df857685085634a5933599a3f857e1&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2018%2F04%2F2410310013230.jpg"></div>
			<div class="box12"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536899431966&di=74df857685085634a5933599a3f857e1&imgtype=0&src=http%3A%2F%2Fimg.duoziwang.com%2F2018%2F04%2F2410310013230.jpg"></div>
		</div>
	<!-- </div> -->
</body>
</html>